<template>
	<view class="nx-search">
		<view class="search-bar"
			:style="{ backgroundColor: bgColor, color: textColor, padding: padding, margin: margin, borderRadius: radius }">
			<uni-icons type="search" size="30"></uni-icons>
			<input class="input-bar" v-model="inputValue" @input="handleInput" :placeholder="placeholder"
				@confirm="handleConfirm" />
			<uni-icons type="clear" size="30" v-if="inputValue.length" @click="handleClear"></uni-icons>
		</view>
		<template v-if="showSearchBtn">
			<slot name="searchBtn">
				<view class="search-btn" @click="handleConfirm">
					搜索
				</view>
			</slot>
		</template>
	</view>
</template>
<script>
	export default {
		props: {
			modelValue: {
				type: String,
				default: '',
			},
			value: {
				type: String,
				default: '',
			},
			placeholder: {
				type: String,
				default: '关键字'
			},
			bgColor: {
				type: String,
				default: '#f6f6f7'
				// default: 'red'
			},
			textColor: {
				type: String,
				default: '#333'
			},
			radius: {
				type: String,
				default: '30rpx'
			},
			padding: {
				type: String,
				default: '10rpx'
			},
			margin: {
				type: String,
				default: '0 10rpx'
			},
			showSearchBtn: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			inputValue() {
				// #ifdef VUE2
				return this.value
				// #endif
				// #ifdef VUE3
				return this.modelValue
				// #endif
			}
		},
		// mounted() {
		// 	console.log(this.value);
		// 	this.inputValue = this.props.value
		// },
		methods: {
			handleInput: function(e) {
				this.$emit('updateValue', e.detail.value)
			},
			handleConfirm: function() {
				this.$emit('confirm', this.inputValue)
			},
			handleClear: function() {
				this.$emit('clear')
				this.inputValue = ''
			}
		}
	}
</script>
<style scoped lang="scss">
	.nx-search {
		display: flex;
		align-items: center;
		padding: 0 20rpx;

		.search-bar {
			flex: 1;
			display: flex;
			align-items: center;
			// background-color: ;

			.input-bar {
				flex: 1;
			}
		}

		.search-btn {
			height: 100%;
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>